import React, { Component } from 'react'
import { inject, observer } from 'mobx-react';
import classnames from 'classnames';
import { Link } from 'react-router'

@inject('routingStore')
@observer
class ModuleName extends Component {
	constructor(props) {
    super(props);
    this.state = {
			menu: [{
                title: '用户管理',
                link: '/user',
                icon: 'bullhorn'
              }, {
                title: '轮播管理',
                link: '/bannerimg',
                icon: 'bullhorn'
              }, {
        				title: '活动管理',
        				link: '/activity',
        				icon: 'bullhorn'
        			}, {
                title: '经验管理',
                link: '/experience',
                icon: 'bullhorn'
              }, {
                title: '面试服务',
                link: '/interview',
                icon: 'bullhorn'
              }, {
        				title: '院校管理',
        				link: '/school',
        				icon: 'university'
        			}, {
                title: '导师管理',
                link: '/teacher',
                icon: 'university'
              }, {
                 title: '学生计划',
                 link: '/plan',
                 icon: 'university'
              }, {
                 title: '课程列表',
                 link: '/course',
                 icon: 'university'
              }, {
                 title: '测验列表',
                 link: '/testing',
                 icon: 'university'
              }, {
                 title: '字典管理',
                 link: '/dictionary',
                 icon: 'university'
              }]
    }
  }

  componentDidMount(){
  }

  fun = () => {

  }

  render() {

    return (
    	<nav id="mainnav-container">
        <div id="mainnav">

          <div id="mainnav-shortcut">
            <ul className="list-unstyled">
              <li className="col-xs-4" data-content="Additional Sidebar" data-original-title="" title="">
                <a id="demo-toggle-aside" className="shortcut-grid" href="#">
                  <i className="fa fa-magic"></i>
                </a>
              </li>
              <li className="col-xs-4" data-content="Notification" data-original-title="" title="">
                <a id="demo-alert" className="shortcut-grid" href="#">
                  <i className="fa fa-bullhorn"></i>
                </a>
              </li>
              <li className="col-xs-4" data-content="Page Alerts" data-original-title="" title="">
                <a id="demo-page-alert" className="shortcut-grid" href="#">
                  <i className="fa fa-bell"></i>
                </a>
              </li>
            </ul>
          </div>
          <div id="mainnav-menu-wrap">
            <div className="nano">
              <div className="nano-content" tabIndex="0">
								<ul id="mainnav-menu" className="list-group">
									{
										this.state.menu.map((item, index) => {
											return <li className={
												classnames({
													"active-link": window.location.hash.replace('#', '') == item.link&&false
												})
											} key={index}>
												<Link to={item.link}>
													<i className={`fa fa-${item.icon}`}></i>
													<span className="menu-title">
														<strong>{item.title}</strong>
														{/*<span className="label label-success pull-right">Top</span>*/}
													</span>
												</Link>
											</li>
										})
									}
								</ul>
								{/*
                <ul id="mainnav-menu" className="list-group">

                  <li className="list-header">Navigation</li>

                  <li className="active-link">
                    <a href="index.html">
                      <i className="fa fa-dashboard"></i>
                      <span className="menu-title">
                        <strong>Dashboard</strong>
                        <span className="label label-success pull-right">Top</span>
                      </span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <i className="fa fa-th"></i>
                      <span className="menu-title">
                        <strong>Layouts</strong>
                      </span>
                      <i className="arrow"></i>
                    </a>

                    <ul className="collapse">
                      <li><a href="layouts-collapsed-navigation.html">Collapsed Navigation</a></li>
                      <li><a href="layouts-offcanvas-navigation.html">Off-Canvas Navigation</a></li>
                      <li><a href="layouts-offcanvas-slide-in-navigation.html">Slide-in Navigation</a></li>
                      <li><a href="layouts-offcanvas-revealing-navigation.html">Revealing Navigation</a></li>
                      <li className="list-divider"></li>
                      <li><a href="layouts-aside-right-side.html">Aside on the right side</a></li>
                      <li><a href="layouts-aside-left-side.html">Aside on the left side</a></li>
                      <li><a href="layouts-aside-bright-theme.html">Bright aside theme</a></li>
                      <li className="list-divider"></li>
                      <li><a href="layouts-fixed-navbar.html">Fixed Navbar</a></li>
                      <li><a href="layouts-fixed-footer.html">Fixed Footer</a></li>

                    </ul>
                  </li>

                  <li>
                    <a href="widgets.html">
                      <i className="fa fa-flask"></i>
                      <span className="menu-title">
                        <strong>Widgets</strong>
                        <span className="pull-right badge badge-warning">9</span>
                      </span>
                    </a>
                  </li>

                  <li className="list-divider"></li>

                  <li className="list-header">Components</li>

                  <li>
                    <a href="#">
                      <i className="fa fa-briefcase"></i>
                      <span className="menu-title">UI Elements</span>
                      <i className="arrow"></i>
                    </a>

                    <ul className="collapse">
                      <li><a href="ui-buttons.html">Buttons</a></li>
                      <li><a href="ui-checkboxes-radio.html">Checkboxes &amp; Radio</a></li>
                      <li><a href="ui-panels.html">Panels</a></li>
                      <li><a href="ui-modals.html">Modals</a></li>
                      <li><a href="ui-progress-bars.html">Progress bars</a></li>
                      <li><a href="ui-components.html">Components</a></li>
                      <li><a href="ui-typography.html">Typography</a></li>
                      <li><a href="ui-list-group.html">List Group</a></li>
                      <li><a href="ui-tabs-accordions.html">Tabs &amp; Accordions</a></li>
                      <li><a href="ui-alerts-tooltips.html">Alerts &amp; Tooltips</a></li>
                      <li><a href="ui-helper-classNamees.html">Helper classNamees</a></li>

                    </ul>
                  </li>

                  <li>
                    <a href="#">
                      <i className="fa fa-edit"></i>
                      <span className="menu-title">Forms</span>
                      <i className="arrow"></i>
                    </a>

                    <ul className="collapse">
                      <li><a href="forms-general.html">General</a></li>
                      <li><a href="forms-components.html">Components</a></li>
                      <li><a href="forms-validation.html">Validation</a></li>
                      <li><a href="forms-wizard.html">Wizard</a></li>

                    </ul>
                  </li>

                  <li>
                    <a href="#">
                      <i className="fa fa-table"></i>
                      <span className="menu-title">Tables</span>
                      <i className="arrow"></i>
                    </a>

                    <ul className="collapse">
                      <li><a href="tables-static.html">Static Tables</a></li>
                      <li><a href="tables-bootstrap.html">Bootstrap Tables</a></li>
                      <li><a href="tables-datatable.html">Data Tables<span className="label label-info pull-right">New</span></a></li>
                      <li><a href="tables-footable.html">Foo Tables<span className="label label-info pull-right">New</span></a></li>

                    </ul>
                  </li>

                  <li>
                    <a href="charts.html">
                      <i className="fa fa-line-chart"></i>
                      <span className="menu-title">Charts</span>
                    </a>
                  </li>

                  <li className="list-divider"></li>

                  <li className="list-header">Extra</li>

                  <li>
                    <a href="#">
                      <i className="fa fa-plug"></i>
                      <span className="menu-title">
                        Miscellaneous
                        <span className="label label-mint pull-right">New</span>
                      </span>
                    </a>

                    <ul className="collapse">
                      <li><a href="misc-calendar.html">Calendar</a></li>
                      <li><a href="misc-maps.html">Google Maps</a></li>

                    </ul>
                  </li>
                  <li>
                    <a href="#">
                      <i className="fa fa-envelope"></i>
                      <span className="menu-title">Email</span>
                      <i className="arrow"></i>
                    </a>

                    <ul className="collapse">
                      <li><a href="mailbox.html">Inbox</a></li>
                      <li><a href="mailbox-message.html">View Message</a></li>
                      <li><a href="mailbox-compose.html">Compose Message</a></li>

                    </ul>
                  </li>
                  <li>
                    <a href="#">
                      <i className="fa fa-file"></i>
                      <span className="menu-title">Pages</span>
                      <i className="arrow"></i>
                    </a>

                    <ul className="collapse">
                      <li><a href="pages-blank.html">Blank Page</a></li>
                      <li><a href="pages-profile.html">Profile</a></li>
                      <li><a href="pages-search-results.html">Search Results</a></li>
                      <li><a href="pages-timeline.html">Timeline<span className="label label-info pull-right">New</span></a></li>
                      <li><a href="pages-faq.html">FAQ</a></li>
                      <li className="list-divider"></li>
                      <li><a href="pages-404.html">404 Error</a></li>
                      <li><a href="pages-500.html">500 Error</a></li>
                      <li className="list-divider"></li>
                      <li><a href="pages-login.html">Login</a></li>
                      <li><a href="pages-register.html">Register</a></li>
                      <li><a href="pages-password-reminder.html">Password Reminder</a></li>
                      <li><a href="pages-lock-screen.html">Lock Screen</a></li>

                    </ul>
                  </li>
                  <li>
                    <a href="#">
                      <i className="fa fa-plus-square"></i>
                      <span className="menu-title">Menu Level</span>
                      <i className="arrow"></i>
                    </a>

                    <ul className="collapse">
                      <li><a href="#">Second Level Item</a></li>
                      <li><a href="#">Second Level Item</a></li>
                      <li><a href="#">Second Level Item</a></li>
                      <li className="list-divider"></li>
                      <li>
                        <a href="#">Third Level<i className="arrow"></i></a>

                        <ul className="collapse">
                          <li><a href="#">Third Level Item</a></li>
                          <li><a href="#">Third Level Item</a></li>
                          <li><a href="#">Third Level Item</a></li>
                          <li><a href="#">Third Level Item</a></li>
                        </ul>
                      </li>
                      <li>
                        <a href="#">Third Level<i className="arrow"></i></a>

                        <ul className="collapse">
                          <li><a href="#">Third Level Item</a></li>
                          <li><a href="#">Third Level Item</a></li>
                          <li><a href="#">Third Level Item</a></li>
                          <li className="list-divider"></li>
                          <li><a href="#">Third Level Item</a></li>
                          <li><a href="#">Third Level Item</a></li>
                        </ul>
                      </li>
                    </ul>
                  </li>

                </ul>
								*/}
								{/*
                <div className="mainnav-widget">

                  <div className="show-small">
                    <a href="#" data-toggle="menu-widget" data-target="#demo-wg-server">
                      <i className="fa fa-desktop"></i>
                    </a>
                  </div>

                  <div id="demo-wg-server" className="hide-small mainnav-widget-content">
                    <ul className="list-group">
                      <li className="list-header pad-no pad-ver">Server Status</li>
                      <li className="mar-btm">
                        <span className="label label-primary pull-right">15%</span>
                        <p>CPU Usage</p>
                        <div className="progress progress-sm">
                          <div className="progress-bar progress-bar-primary" style={{width: '15%'}}>
                            <span className="sr-only">15%</span>
                          </div>
                        </div>
                      </li>
                      <li className="mar-btm">
                        <span className="label label-purple pull-right">75%</span>
                        <p>Bandwidth</p>
                        <div className="progress progress-sm">
                          <div className="progress-bar progress-bar-purple" style={{width: '75%'}}>
                            <span className="sr-only">75%</span>
                          </div>
                        </div>
                      </li>
                      <li className="pad-ver"><a href="#" className="btn btn-success btn-bock">View Details</a></li>
                    </ul>

                  </div>
                </div>
								*/}
              </div>
            </div>
          </div>

        </div>
      </nav>
    )
  }
}

module.exports = ModuleName
